<template>
<section class="chart-container">
        <div>
            <el-form :inline="true" :model="params" class="demo-form-inline">
                <el-date-picker
                        v-model="params.datetime"
                        type="datetimerange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:01']">
                </el-date-picker>

                <el-form-item>
                    <el-button type="primary" @click="reload">查询</el-button>
                </el-form-item>
            </el-form>

        </div>
        <el-row>
            <el-col :span="24">
                <div id="chartLine" style="width:100%; height:400px;"></div>
            </el-col>
            <el-col :span="24">
                <div id="chartPie" style="width:100%; height:400px;"></div>
            </el-col>
        </el-row>
    </section>
</template>

<script>
import echarts from 'echarts'

export default {
        data() {
            return {
                chartLine: null,
                chartPie: null,
                datefields:[],
                usermap:[],
                params: {
                    datetime: []
                },
            }
        },
        created() {
            this.fetch();
        },
        methods: {
            fetch() {
                axios.get('/admin/member/map/data', {params: this.params}).then((res) => {
                  if (res.data.code === 0) {
                    this.usermap = res.data.data.items;
                    this.datefields = res.data.data.datefields;
                    this.drawCharts();
                  } else {
                    this.$message(res.data.msg);
                  }
                  this.loading = false;
                }).catch((err) => {
                  console.log(err);
                  this.$message('系统错误');
                  this.loading = false;
                })
            },
            drawLineChart() {
                this.chartLine = echarts.init(document.getElementById('chartLine'));
                let that = this
                this.chartLine.setOption({
                    title: {
                        text: '数据统计'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['话费充值总金额', '话费直充金额','话费套餐金额']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: that.datefields
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: that.usermap
                });
            },
            drawCharts() {
                this.drawLineChart()
            },
            reload: function() {
                this.fetch();
            }
        },

        mounted: function () {
            //this.drawCharts()
        },
        updated: function () {
            //this.drawCharts()
        }
    }
</script>